<template>
  <div class="routers">
    <div class="router" v-for="(item, index) in routers" :key="index">
      <router-link :to="item.link">{{item.name}}</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'slider-bar',
  data () {
    return {
      routers: [
        {
          link: '/home',
          name: '首页'
        },
        {
          link: '/button',
          name: '按钮'
        },
        {
          link: '/icon',
          name: '图标'
        },
        {
          link: '/row',
          name: '布局'
        },
        {
          link: '/layout',
          name: '布局容器'
        }
      ]
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .routers {
    display: flex;
    
    .router{
      display: inline-block;
      padding: 10px 5px;
    }
  }
</style>
